import Vue from 'vue'

//1.1导入路由的包
import VueRouter from 'vue-router'
//1.2安装路由模块
Vue.use(VueRouter)

// 2.1 导入 vue-resource
import VueResource from 'vue-resource'
// 2.2 安装 vue-resource
Vue.use(VueResource)
//设置API接口公共路径
Vue.http.options.root = 'https://www.easy-mock.com/mock/5c89aafb93fc1b57017f58b1/vue'
//配置post请求全局 表单数据格式  aplication/x-www-form-urlencoded
Vue.http.options.emulateJSON = true


//每次刚进入 网站，肯定会调用 main.js 在刚调用的时候先从本地存储中把购物车的信息获取到
var car = JSON.parse(localStorage.getItem('car') || '[]')

//导入vuex 注册
import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
    state: {
        //this.$store.state.变量

        //将购物车中的商品数据，用一个数组存储起来，在 car 数组中，存储一些商品的对象，咱们可以暂时将这个商品对象，设计成这个样子 {id:商品id, count:要购买的数量, price:商品的单价, selected:购物车的商品是否选中}
        
        //当页面刷新时，都去获取下本地存储中购物车的信息
        car: car
    },
    mutations: {
        //this.$store.commit('方法名','按需传递一个唯一的参数')

        addToCar(state, goodsInfo) {
            //点击加入购物车，把商品信息，保存到 store 中的 car 上
            //分析：
            //1.如果购物车中之前就已经有该商品了，那么只需要更新数量
            //2.如果没有，则直接把商品 push 到 car 中即可
            var flag = false;
            state.car.some(item => {
                if (item.id == goodsInfo.id) {
                    item.count += parseInt(goodsInfo.count)
                    flag = true
                    return true
                }
            })
            //如果最终 循环完毕，得到的 flag 还是 false 则把商品数据直接 push 到 car 中
            if (!flag) {
                state.car.push(goodsInfo)
            }

            //当更新car 之后，把 car 数组存储到 本地的 localStorage 中
            localStorage.setItem('car', JSON.stringify(state.car))
        }
    },
    getters: {
        //this.$store.getters.方法名
        //相当于计算属性，也相当于 filters 过滤器
        getAllCount(state){
            var c = 0;
            state.car.forEach(item=>{
                c += item.count
            })
            return c
        }
    }
})

//导入时间插件
import moment from 'moment'
//定义全局过滤器 用 node.js 中的 moment 方法 
Vue.filter('dateFormat', function (dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
    return moment(dataStr).format(pattern)
})


//导入rem
import './lib/rem.js'

//导入 MUI 的样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'


// //按需导入 Mint-UI 中的组件 (懒加载不能用，所以要改成全部导入)
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
// Vue.component(Button.name, Button)
// import 'mint-ui/lib/style.css'
// //导入Lazyload
// Vue.use(Lazyload);

//全部导入Mint-UI
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

//导入VuePreview 图片预览插件
import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)

// with parameters install
// Vue.use(preview, {
//   mainClass: 'pswp--minimal--dark',
//   barsSize: {top: 0, bottom: 0},
//   captionEl: false,
//   fullscreenEl: false,
//   shareEl: false,
//   bgOpacity: 0.85,
//   tapToClose: true,
//   tapToToggleControls: false
// })


//1.3导入自己的router.js路由模块
import router from './router.js'

//导入 App 根组件
import app from './App.vue'

var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router, //1.4 挂载路由对象到 vm 实例上
    store//挂载 vuex 的 store  状态管理对象

})
